<template>
    <div class="full-dialog">
        <el-dialog :visible.sync="show" fullscreen :show-close="false" destroy-on-close>
            <HeaderNav class="header-box" @cancel="cancel"></HeaderNav>
            <div class="main">
                <div id="father" class="flow-container">
                    <div class="scale-slider">
                        <i class="btn el-icon-minus" @click="zoom -= 5"></i>
                        <span style="font-size: 14px;pointer-events: none;cursor: default;">{{`${zoom}%`}}</span>
                        <i class="btn el-icon-plus" @click="zoom += 5"></i>
                    </div>
                    <div id="child" style="display: inline-flex; flex-direction: column; align-items: center;"
                         :style="{transform: `scale(${zoom/100})`}">
                        <processSubject :list="list" v-if="list.length > 0" @del="delList"></processSubject>
                        <section class="end-node">
                            流程结束
                        </section>
                    </div>
                </div>
                <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
                    <span>我来啦!</span>
                </el-drawer>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import HeaderNav from '@/components/HeaderNav.vue';
  import processPopover from '@/components/processDesign/processPopover.vue'; // 流程选择
  import processSubject from './processSubject.vue'; // 流程选择
  import json from '@/assets/json/json.js';

  export default {
    name: "processDialog",
    props: {
      show: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        drawer: false,
        suggestFlag: false,
        direction: 'rtl',
        input: '发起节点',
        zoom: 100,

        // 流程图标数据
        list: []
      }
    },
    components: {
      HeaderNav,
      processPopover,
      processSubject
    },
    watch: {
      suggestFlag(val) { // 为第一个流程的input获取焦点
        if (val) {
          this.$nextTick(() => {
            this.$refs.input.focus()
          })
        }
      },
      show() {
        if (this.list.length === 0) {
          this.list.push({
            setId: new Date().valueOf() + '0',
            type: 'start',
            title: '发起节点',
            suggestFlag: false
          })
        }
      }
    },
    created() {

      // this.list = json.list;
      this.list = this.setId(json.list);
      // console.log(this.list,'...............................');
    },
    mounted() {
      this.$nextTick(() => {
        this.scrollInit();
      })
    },
    methods: {
      // 初始化与绑定监听事件方法
      scrollInit() {
        // 获取要绑定事件的元素
        const father = document.getElementById("child");
        const child = document.getElementById("child");
        // 判断鼠标是否按下
        let isMouseDown = false;
        // 记录Y轴滚动距离
        let scrollTop = 0;
        // 记录X轴滚动距离
        let scrollLeft = 0;
        // 记录鼠标落点X坐标
        let startX = 0;
        // 记录鼠标落点Y坐标
        let startY = 0;

        child.addEventListener("mousedown", function (event) {
          // 修改按下状态
          isMouseDown = true;
          // 记录按下鼠标的位置, 用于计算鼠标的移动距离
          startX = event.offsetX;
          startY = event.offsetY;
        });
        child.addEventListener("mousemove",  function (event)  {
          if (isMouseDown) { // 判断是否是鼠标按下滚动元素区域
            this.style.cursor = 'move';
            // 获取鼠标按下后移动的距离
            let offsetX = event.offsetX - startX;
            let offsetY = event.offsetY - startY;
            // PS: 需要注意的是当鼠标向上移动时, 滚动条应该向下移动, 所以这里都是减去的移动距离
            scrollTop = scrollTop - offsetY;
            scrollLeft = scrollLeft - offsetX;

            // TODO

            // 将计算后的距离赋值给滚动条
            father.scrollTop = scrollTop;
            father.scrollLeft = scrollLeft;
          }
        });
        // 鼠标抬起停止拖动
        child.addEventListener("mouseup", function () {
          this.style.cursor = 'auto';
          isMouseDown = false;
        });
        // 鼠标离开元素停止拖动
        child.addEventListener("mouseleave", function (event) {
          // this.style.cursor = 'auto';
          isMouseDown = false;
        });
      },
      /* 删除list时执行的方法 */
      delList(item) {
        console.log('是否执行了此间函数');
        this.list = item;
      },
      /* 设置id */
      setId(arr) {
        arr.map((item, index) => {
          console.log(item);
          setTimeout(() => {
            item.setId = new Date().valueOf() + index.toString();
            if (item.hasOwnProperty('list')) {
              item.list.map((iteml, indexl) => {
                setTimeout(() => {
                  iteml.setId = new Date().valueOf() + indexl.toString();
                  if (iteml.hasOwnProperty('children')) {
                    setTimeout(() => {
                      this.setId(iteml.children);
                    }, 10)
                  }
                }, 10)
              })
            }
          }, 10)
        });
        return arr;
      },
      /* 点击添加节点 */
      beginpopoverClick(item, index, type) {
        this.$refs.popoverRef.doClose();
        this.list.splice(index, 0, item);
        // this.$forceUpdate();
      },
      handleClose(done) {
        done();
      },
      cancel() {
        this.$emit('cancel');
      }
    }
  }
</script>

<style lang="less" scoped>
    .main {
        height: calc(100vh - 80px);
        overflow: hidden;
        background: #ebeef5;
        padding: 10px;
    }


    @import url('./common.less'); // 条件分支

    ::v-deep {
        .el-input__inner {
            width: 190px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            left: 12px;
            background: #EBEEF5;
            margin-top: 6px;
            padding: 0 3px;
            border: 1px solid #336699;
            font-size: 12px;
        }

        .subFlow .el-input__inner,
        .condition .el-input__inner {
            width: 140px;
        }

        .el-dialog__header {
            padding: 0;
        }

        .el-dialog__body {
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    }

    ::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }

    ::-webkit-scrollbar-corner {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-track {
        border-radius: 999px;
        border: 5px solid transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, .3);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-track {
        border-radius: 999px;
        border: 5px solid transparent;
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
    }
</style>
